@*
* Copyright 2016 LinkedIn Corp.
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not
* use this file except in compliance with the License. You may obtain a copy of
* the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations under
* the License.
*@
@(flowDefPair: IdUrlPair, graphType: String, results: java.util.Map[IdUrlPair, java.util.Map[IdUrlPair, java.util.List[models.AppResult]]],
    idPairToJobNameMap: java.util.Map[IdUrlPair, String], flowExecTimeList: java.util.List[Long])

  @import com.linkedin.drelephant.util.Utils;
  @import com.linkedin.drelephant.analysis.Severity
  @import scala.Predef; var jobDefIndex = 0

  @getSeverityColor(severity: Severity) = @{
    var color: String = "#5cb85c"; // LOW or NONE

    if(severity.getText.equalsIgnoreCase("CRITICAL")) {
      color = "#d9534f"
    } else if(severity.getText.equalsIgnoreCase("SEVERE")) {
      color = "#e4804e"
    } else if(severity.getText.equalsIgnoreCase("MODERATE")) {
      color = "#f0ad4e"
    }

    color
  }

  @if(results != null && results.nonEmpty) {
    <div class="box shadow details-container">
      <h4><a href="@flowDefPair.getId()">Flow History</a></h4>
      <hr class="horizontal-line">

      @if(graphType.equals("resources")) {
        <script src="@routes.Assets.at("js/flowresourcehistoryform.js")" type="text/javascript"></script>
        <script src="@routes.Assets.at("js/graphresourcesmetricsutility.js")" type="text/javascript"></script>
        <script src="@routes.Assets.at("js/resourcegraphtooltiputility.js")" type="text/javascript"></script>
      } else {
        <script src="@routes.Assets.at("js/flowtimehistoryform.js")" type="text/javascript"></script>
        <script src="@routes.Assets.at("js/graphtimemetricsutility.js")" type="text/javascript"></script>
        <script src="@routes.Assets.at("js/timegraphtooltiputility.js")" type="text/javascript"></script>
      }

      <div>

          <!-- Performance Score Graph -->
        <div class="history-graph">
          <img src='@routes.Assets.at("images/loading.gif")' id='loading-indicator' alt='Loading...' class="loading-indicator"/>
          <svg class="svg-graph graph-padding" id="visualisation" ></svg>
        </div>

        <hr>

          <!-- The tabular results -->
        <div class="table-responsive">
          <table class="table table-striped table-bordered table-hover">

            <thead>
              <tr>
                <th class="history-table-first-column">Flow Executions</th>
                @for((jobDefPair, jobName) <- idPairToJobNameMap) {
                  <th class="history-table-metrics-column">
                    <a href='./newjobhistory?job-def-id=@helper.urlEncode(jobDefPair.getUrl)&select-graph-type=@graphType' data-toggle='tooltip'
                    title='@jobDefPair.getUrl'>Job @{jobDefIndex = jobDefIndex + 1; jobDefIndex}<br>
                      @if(jobName.length > 45) { @jobName.substring(0, 41)... } else { @jobName }
                    </a>
                    <table class="history-table-metrics-table">
                      <tr><td>
                          <!-- div containing the header table -->
                        <div>
                          <table class="history-table-metrics-table">
                            <tbody>
                              <tr>
                                <td class="used-resource-block hasTooltip"><img src='@routes.Assets.at("images/usedmemory.png")' class="metrics-icons-table" alt='used resources'/>
                                  <div id="tooltip-div">
                                    <span> The resources used by the stage in GB Hours</span>
                                  </div>
                                </td>
                                <td class="wasted-resource-block hasTooltip"><img src='@routes.Assets.at("images/wastedmemory.png")' class="metrics-icons-table" alt='wasted resources'/>
                                  <div id="tooltip-div">
                                    <span> The total resources wasted by the stage in GB Hours</span>
                                  </div>
                                </td>
                                <td class="run-time-block hasTooltip"><img src='@routes.Assets.at("images/runtime.png")' class="metrics-icons-table" alt='total runtime'/>
                                  <div id="tooltip-div">
                                    <span> The total running time of the stage in HH:MM:SS</span>
                                  </div>
                                </td>
                                <td class="wait-time-block hasTooltip"><img src='@routes.Assets.at("images/waittime.png")' class="metrics-icons-table" alt='total wait time'/>
                                  <div id="tooltip-div">
                                    <span> The total wait time for the stage in HH:MM:SS</span>
                                  </div>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </td>
                      </tr>
                    </table>
                  </th>
                }
              </tr>
            </thead>

            <tbody>
            @for((flowExecPair, jobMap) <- results) {
              <tr>

                  <!-- The First column, execution id -->
                <td class="history-table-first-column">
                  <a class="exectime" href='@flowExecPair.getUrl' data-toggle='tooltip' title='@flowExecPair.getUrl'>Loading...</a>
                </td>

                  <!-- The remaining columns -->
                @for((jobDefPair, jobName) <- idPairToJobNameMap) {
                  <td class="history-table-metrics-column">
                  @if(jobMap.get(jobDefPair) != null) {
                    <div>
                      <table class="table table-bordered history-table-metrics-table">
                        <tbody>
                          <tr>
                            <td class="used-resource-block hasTooltip" >@Utils.getResourceInGBHours(Utils.getTotalResources(jobMap.get(jobDefPair))).split("GB")(0)
                            </td>
                            <td class="wasted-resource-block hasTooltip">@Utils.getResourceInGBHours(Utils.getTotalWastedResources(jobMap.get(jobDefPair))).split("GB")(0)
                            </td>
                            <td class="run-time-block hasTooltip">@(Utils.getDurationBreakdown(Utils.getTotalRuntime(jobMap.get(jobDefPair))).split("Hours")(0))
                            </td>
                            <td class="wait-time-block hasTooltip">@(Utils.getDurationBreakdown(Utils.getTotalWaittime(jobMap.get(jobDefPair))).split("Hours")(0))
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  }
                  </td>
                }
              </tr>
            }
            </tbody>
          </table>
        </div>
      </div>
    </div>
  }